<template>
  <section class="areaMain">
    <div class="topTitle blue getTop">
      <span class="goBack" @click="goBack"><i></i></span>
      最受欢迎专区
    </div>
    <div class="tabTop">
      <span @click="getSelected(0)" :class="{'on':selected==0}">女神榜</span>
      <span @click="getSelected(1)" :class="{'on':selected==1}">男神榜</span>
    </div>
    <div class="tabInfo">
      <div v-if="active==0">
          <div  v-if="listA!=''" class="areaItemTop">
            <div class="info">
              <p @click="goRouter(listA[0].id)" class="logo"><i></i><img v-if="listA[0].avatar!=''" :src="listA[0].avatar"><img v-else :src="$store.state.defLogo"></p>
              <p v-if="listA[0].nickname!=''" class="name">{{listA[0].nickname}}</p>
              <p v-else class="name">{{listA[0].id}}</p>
              <p class="meili"><i></i>魅力值：{{listA[0].charm}}</p>
              <p class="txt">{{listA[0].height}}cm · {{listA[0].weight}}kg · {{listA[0].constellation|dayB}}座 · {{listA[0].live_province.name}}</p>
            </div>
          </div>
          <div class="areaItem">
            <ul>
              <li v-for="(item,index) in listA" v-if="index>0">
                <span class="num">{{index+1}}</span>
                <img @click="goRouter(item.id)" v-if="item.avatar!=''" :src="item.avatar" class="logo">
                <img @click="goRouter(item.id)" v-else :src="$store.state.defLogo"  class="logo">
                <div class="info">
                  <p class="name">{{item.nickname}}</p>
                  <p class="meili"><i></i>魅力值：{{item.charm}}</p>
                  <p class="txt">{{item.height}}cm · {{item.weight}}kg · {{item.constellation|dayB}}座</p>
                </div>
                <span v-if="item.live_province!=null" class="add"><i></i>{{item.live_province.name}}</span>
              </li>
            </ul>
          </div>
      </div>
      <div v-if="active==1">
          <div  v-if="listB!=''" class="areaItemTop">
            <div class="info">
              <p @click="goRouter(listB[0].id)" class="logo"><i></i><img v-if="listB[0].avatar!=''" :src="listB[0].avatar"><img v-else :src="$store.state.defLogo"></p>
              <p v-if="listB[0].nickname!=''" class="name">{{listB[0].nickname}}</p>
              <p v-else class="name">{{listB[0].id}}</p>
              <p class="meili"><i></i>魅力值：{{listB[0].charm}}</p>
              <p class="txt">{{listB[0].height}}cm · {{listB[0].weight}}kg · {{listB[0].constellation|dayB}}座 · {{listB[0].live_province.name}}</p>
            </div>
          </div>
          <div class="areaItem">
            <ul>
              <li v-for="(item,index) in listB" v-if="index>0">
                <span class="num">{{index+1}}</span>
                <img @click="goRouter(item.id)" v-if="item.avatar!=''" :src="item.avatar" class="logo">
                <img @click="goRouter(item.id)" v-else :src="$store.state.defLogo"  class="logo">
                <div class="info">
                  <p class="name">{{item.nickname}}</p>
                  <p class="meili"><i></i>魅力值：{{item.charm}}</p>
                  <p class="txt">{{item.height}}cm · {{item.weight}}kg · {{item.constellation|dayB}}座</p>
                </div>
                <span v-if="item.live_province!=null" class="add"><i></i>{{item.live_province.name}}</span>
              </li>
            </ul>
          </div>
      </div>
    </div>
    
  </section>
</template>
<script>
import axios from 'axios'
import {Get,Post} from '@/config/api.js'
export default {
  name: 'hello',
  data() {
    return {
      defLogo:'../static/images/deflogo.jpg',
      selected:0,
      active:0,
      listA: '',//女
      listB: '',//男
    }
  },
  mounted(){
    this.getData()
  },
  methods: {
    //返回上一页
    goBack(){
      this.$router.go(-1)
    },
    //切换男女神
    getSelected(val){
      this.selected=val
      this.active=val
    },
    //请求数据
    async getData() {
      let sql1='/user?gender=1&_per_page=10&_sort=-charm&_include=live_province,live_city'
      if(this.vLogin()){
        sql1='/user?gender=1&_per_page=10&_sort=-charm&_include=user_photo,user_follow,live_province,live_city'
      }
      await Get(sql1,this.$store.state.token).then((res)=>{
        this.listA=res.data
      })

      let sql2='/user?gender=2&_per_page=10&_sort=-charm&_include=live_province,live_city'
      if(this.vLogin()){
        sql1='/user?gender=2&_per_page=10&_sort=-charm&_include=user_photo,user_follow,live_province,live_city'
      }
      await Get(sql2,this.$store.state.token).then((res)=>{
        this.listB=res.data
      })
    },
    //去个人首页
    async goRouter(id){
      let data={
        "visitor_user_id":id
      }
      Post('/user/visitor',this.$store.state.token,data)
      this.$router.push({ path: '/aboutShow',query: { uid: id }})
    },

  }
}

</script>
